<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="queryDatas()">
      <el-form-item>
        <el-select v-model="dataForm.houseId" placeholder="猪舍" clearable>
          <el-option
              v-for="item in houses"
              :key="item.id"
              :label="item.name"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="Date">
            <el-date-picker
              v-model="dataForm.date"
              align="right"
              type="date"
              placeholder="报表日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
      <el-form-item>
        <el-button @click="queryDatas()">{{ $t('query') }}</el-button>
        <el-button @click="exportDatas()">{{ $t('export') }}</el-button>
      </el-form-item>
    </el-form>
    <div class="mod-stock__deadbreed}">
      <el-table style="width: 100%; font-size: 10px" :data="datas">
        <el-table-column align="center" :prop="key1" :label="row1.description" v-for="(row1, key1) in json_headers" :key="key1" v-if="key1 != 'farm_id'">
          <el-table-column align="center" v-if="row1.properties" :prop="[key1,key2].join('_')" :label="row2.description" v-for="(row2, key2) in row1.properties" :key="key2">
            <el-table-column align="center" v-if="row2.properties" width="50px" :prop="[key1,key2,key3].join('_')" :label="row3.description" v-for="(row3, key3) in row2.properties" :key="key3"></el-table-column>
          </el-table-column>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <!--<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>-->
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { shrink } from '@/utils/schema'
import Cookies from 'js-cookie'
import qs from 'qs'
/* eslint-disable */
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      model: 'deadbreed',
      json_headers: {},
      datas: [],
      mixinViewModuleOptions: {
        getDataListURL: '/report/daily_boar_data',
        getDataListIsPage: true,
        exportURL: '/history/deadbreed/export',
        deleteURL: '/history/deadbreed',
        deleteIsBatch: true
      },
      dataForm: {
        id: ''
      }
    }
  },
  components: {
  },
  mounted() {
    this.queryProps();
  },
  methods: {
    // 获取数据列表
    queryProps () {
      let that = this
      this.dataListLoading = true
      this.$http.get(
        '/report/daily_boar_properties',
        {
          params: {
            order: this.order,
            orderField: this.orderField,
            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
            ...this.dataForm
          }
        }
      ).then(({ data: res }) => {
        if (res.code !== 0) {
          that.heasers = []
          return this.$message.error(res.msg)
        }
         that.json_headers.date = res.data.properties.date;
        that.json_headers.house_id = res.data.properties.house_id;
        that.json_headers.stock = res.data.properties.stock;
        that.json_headers.in = res.data.properties.in;
        that.json_headers.out = res.data.properties.out;
        that.json_headers.dead = res.data.properties.dead;
        that.json_headers.mortality = res.data.properties.mortality;
        that.json_headers.sale = res.data.properties.sale;

        this.queryDatas();
        that.dataListLoading = false
      }).catch(() => {
        that.dataListLoading = false
      })
    },
    // 分页, 每页条数
    pageSizeChangeHandle (val) {
      this.page = 1
      this.limit = val
      this.queryDatas()
    },
    // 分页, 当前页
    pageCurrentChangeHandle (val) {
      this.page = val
      this.queryDatas()
    },
    exportDatas () {
      var params = qs.stringify({
        'token': Cookies.get('token'),
        order: this.order,
        orderField: this.orderField,
        page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
        limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
        ...this.dataForm
      })
      window.location.href = `${window.SITE_CONFIG['apiURL']}/report/daily_boar_export?${params}`
    },
    queryDatas () {
      let that = this
      this.dataListLoading = true
      this.$http.get(
        '/report/daily_gestation_data',
        {
          params: {
            order: this.order,
            orderField: this.orderField,
            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
            limit: this.mixinViewModuleOptions.getDataListIsPage ? this.limit : null,
            ...this.dataForm
          }
        }
      ).then(({ data: res }) => {
        if (res.list == undefined) {
          that.heasers = []
          return this.$message.error(res.msg)
        }
        that.datas = [];
        this.total = res.total;
        res.list.forEach(function(record){
          record.house_id = record.house_name;
          record.date = record.date.split(' ')[0];
          that.datas.push(shrink(record));
        });
        that.dataListLoading = false
        that.$forceUpdate()
      }).catch(() => {
        that.dataListLoading = false
      })
    }
  }
}
</script>
